<template>
	<view>
		<view class='Popup'>
			<u-popup v-model="show" :mask="true" :closeable='false' mode="bottom" width="100%" border-radius="40"
				height="auto" @close="onClose">
				<!-- <image src="/static/pflogo.jpg" mode="aspectFill" class="tximgs1"></image>
				<view class="dtxt">攀峰教育</view>
				<view class="dtxt1">登录后体验更多服务</view>
				<view class="dtxt2">
					<image @tap="xbtn" :src="dcheck ? '/static/xzicons2.png' : '/static/xzicons1.png'" mode="widthFix"></image>
					<view>
						已阅读同意
						<span @tap.native="jump('/subcontract/xydes/xydes')">《用户隐私协议》</span>
					</view>
				</view> -->
				<view class="dtxt">完善信息</view>
				<button class="tximg" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="pic?img_url+pic:'/static/mrimg.png'" mode="aspectFill"></image>
				</button>
				<view class="txt">获取头像</view>
				<view class="nc">
					<view>昵称</view>
					<input type="nickname" @change="userimg" v-model="username" placeholder="请输入昵称" />
				</view>
				<view class="dlbtn">
					<!-- <view @tap="onClose">暂不登录</view> -->
					<!--  -->
					<button @tap="logins" class="btn" >登录</button>
					<!-- <button open-type="getPhoneNumber" v-else @getphonenumber="getPhoneNumber" class="btn">立即登录</button> -->
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var util = require('../utils/util.js');
	var encrypt = require('../utils/api.js');
	export default {
		name: 'Authorize',
		props: {

		},
		data() {
			return {
				img_src: app.globalData.img_src,
				img_url: app.globalData.img_urls,
				show: true,
				dcheck: false,
				descon: '',
				username:'',
				pic:''
			}
		},
		onLoad: function() {
			var that = this;
		},
		created() {
			
		},
		mounted: function() {

		},
		methods: {
			userimg(e){
				this.username = e.detail.value;
				//console.log(this.username)
			},
			onChooseAvatar(e) {
				// e.detail.avatarUrl 是选择的头像图片的临时路径
				//console.log(e);
				// 可以在这里执行上传到服务器的操作
				var that = this
				uni.uploadFile({
					url: that.img_url+'api/Upload/uploadpic',
					filePath: e.detail.avatarUrl,
					formData: {
						token: uni.getStorageSync('token')
					},
					name: 'file',
					success: function(res) {
						////console.log(22)
						//打印
						var data = JSON.parse(res.data);
						data = encrypt.decryptAES(data.data.list,data.data.str)
						//console.log(data)
						that.pic = data
					},
					fail: function(err) {}
				});
			},
			jump(url) {
				uni.navigateTo({
					url: url + '?id=' + this.descon[0].id
				})
			},
			// 选中登录服务协议按钮
			xbtn() {
				this.dcheck = !this.dcheck
			},
			onClose() {
				// this.$emit('authColse', false);
				this.show = true
			},
			logins: util.throttle(function(e) {
				//console.log(this.username)
				var that = this;
				if (this.pic == '') {
					app.globalData.show('请点击获取头像~')
					return true
				}
				if (this.username == '') {
					app.globalData.show('请输入昵称或点击获取~')
					return true
				}
				var data = {
					pic:this.pic,
					name:this.username,
					sex:'',
					birthday:'',
				}
				this.$emit('logins', data);
			}),
			getCodes() {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event) => {
						////console.log(event)
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						this.$tui.request('index.php/api/user/getKsInfoByAPP', 'post', {
							"code": event.code
						}).then(res => {
							//console.log(res)
							if (res.code == 0) {
								this.sk = res.data.session_key
							} else {
								app.show(res.msg)
							}
						});
					},
					fail: (err) => {
						this.$tip.tip("授权失败")
						// 登录授权失败  
						// err.code是错误码
					}
				})
			},
			getPhoneNumber(e) {
				//console.log(e)
				var data = {
					pic:this.pic,
					username:username,
					code:e
				}
				this.$emit('getPhoneNumber', data);
			},
		}
	}
</script>

<style scoped lang='scss'>
	.txt{
		width: 100%;
		height: auto;
		text-align: center;
		line-height: 22px;
		font-size: 28rpx;
		color: #999;
	}
	.tximg>image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
	}
	.tximg{
		width: 120rpx;
		height: 120rpx;
		display: block;
		margin: 14px auto;
		border-radius: 50px;
		border: none;
		background: none;
		padding: 0px;
		margin-bottom: 10px;
	}
	.tximg::after{
		content: "";
		border:none;
	}
	.nc>input{
		width: 75%;
		height: 90rpx;
		display: table;
		float: left;
		font-size: 32rpx;
		color: #222;
	}
	.nc>view:nth-child(1){
		width:25%;
		height: 90rpx;
		display: table;
		float: left;
		font-size: 32rpx;
		color: #222;
		line-height: 90rpx;
	}
	.nc {
		width: 80%;
		height:90rpx;
		display:table;
		margin-left:10%;
		border-bottom: 1px solid #ededed;
	}
	.tximgs1 {
		width: 120rpx;
		height: 120rpx;
		display: table;
		border-radius: 120rpx;
		margin: auto;
		margin-top: 20px;
	}

	.dtxt {
		width: 100%;
		height: auto;
		display: table;
		text-align: center;
		line-height: 45px;
		font-size:35rpx;
		color: #222;
		margin-top: 6px;
	}

	.dtxt1 {
		width: 100%;
		height: auto;
		display: table;
		text-align: center;
		line-height: 22px;
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.dtxt2 {
		width: auto;
		height: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
	}

	.dtxt2>image {
		width: 22px;
		height: auto;
		display: table;
		margin-right: 5px;
	}

	.dtxt2>view {
		width: auto;
		height: auto;
		color: rgba(86, 86, 86, 1);
		line-height: 22px;
		font-size: 28rpx;
	}

	.dtxt2>view>span {
		color: rgba(235, 69, 60, 1);
	}

	.dlbtn {
		width: 710rpx;
		height: 85rpx;
		display: table;
		margin: 20px 20rpx;
	}

	.dlbtn>view {
		border-radius: 50px;
		font-size: 16px;
		text-align: center;
		width: 48%;
	}

	.dlbtn>view:nth-child(1) {
		float: left;
		border: 2rpx solid rgba(232, 232, 232, 1);
		line-height: 81rpx;
		color: rgba(151, 151, 151, 1);
		box-sizing: border-box;
	}

	.btn {
		border-radius: 50px;
		font-size: 16px;
		text-align: center;
		width: 100%;
		float: right;
		line-height: 85rpx;
		background-color: rgba(255, 60, 42, 1);
		color: #fff;
		box-shadow: none;
		appearance: none;
		outline: none;
	}

	.Popup {
		width: 100%;
	}
</style>